<template>
  <view>
    <!-- <u-sticky offset-top="1">

        <u-tabs :list="stolist" @click="selectStatues"></u-tabs>

    </u-sticky> -->

    <view class="search">
      <u-search
        class="left"
        placeholder="请输服务名称"
        @change="selectcard"
        :bgColor="searchstyle"
        :borderColor="borderstyle"
        :showAction="false"
        v-model="keyword"
      ></u-search>
      <view class="backtop">
        <u-button
          type="primary"
          @click="topback"
          class="custom-style"
          :plain="true"
          size="mini"
          text="刷新"
        ></u-button>
      </view>
    </view>

    <view v-if="empty == 'isempty'" class="empty">
      <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </view>
    <view class="section">
      <u-list
        :scrollTop="60"
        height="620"
        :style="height"
        :enableBackToTop="true"
        v-if="empty == 'notempty'"
        :preLoadScreen="page * 5"
        @scrolltolower="scrolltolower"
        :pagingEnabled="true"
      >
        <u-list-item v-for="item in servieslist" :key="item.id">
          <u-swipe-action>
            <u-swipe-action-item
              @click="action"
              :name="item.id"
              :options="options"
            >
              <view class="card" @click="toEdit(item.id)">
                <view class="left">
                  <view class="img">
                    <u-image :src="item.image_text" width="80px" height="80px">
                      <template v-slot:loading>
                        <u-loading-icon color="red"></u-loading-icon>
                      </template>
                    </u-image>
                  </view>
                </view>
                <view class="right">
                  <view class="text flax">
                    <h5>服务标题:</h5>
                    <span class="flax-span">{{ item.title }}</span>
                  </view>
                  <view class="text">
                    <span>所属门店:</span>
                    <span>{{ item.store.name }}</span>
                  </view>
                  <view class="text">
                    <span>创建时间:</span>
                    <span>{{ item.createtime_text }}</span>
                  </view>

                  <view class="text">
                    <span>服务简介:</span>
                    <span>{{ item.content }}</span>
                  </view>
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </u-list-item>

        <u-loadmore
          :status="status"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
        />
      </u-list>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>

    <!-- 模态框 -->
    <u-modal
      :show="show"
      :content="content"
      showCancelButton
      @confirm="confirm"
      @cancel="cancel"
    />
    <u-modal
      :show="show1"
      :content="content1"
      showCancelButton
      @confirm="confirm1"
      @cancel="cancel1"
    />

    <view class="btnstyle">
      <u-button type="primary" class="custom-style" @click="addservice(typeid)"  text="添加服务"></u-button>

    </view>

  </view>

</template>

<script>
export default {
  onLoad(option) {
    this.auth = this.$u.auth.check();

    this.typeid = option.typeid ? option.typeid : 0
    
    this.list();
  },
  created() {
     setInterval(() => {
        this.$u.count.check();
    },15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      typeid:0,
      status: "loading",
      loadingText: "努力加载中",
      loadmoreText: "下拉加载更多",
      nomoreText: "没有更多数据了",
      current:0,
      padding: "150rpx 0rpx",
      storelist: [],
      options: [
        {
          text: "下架",
          style: {
            backgroundColor: "#0c32ad",
          },
        },
        {
          text: "销毁",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
      ],
      content: "是否销毁该服务实例",
      content1: "是否下架该服务",
      auth: {},
      page: 1,
      empty: "",
      // stolist:[],
      serid: 0,
      keyword: "",
      searchstyle: "#ffffff",
      borderstyle: "#eee",
      servieslist: [],
      show: false,
      show1: false,
    };
  },
  methods: {

    action(item) {
      // 添加
      if (item.index == 0) {
        this.show1 = true;
        this.serid = item.name;
      }
      // 销毁
      if (item.index == 1) {
        this.show = true;
        this.serid = item.name;
      }
    },
    async confirm() {
      this.show = false;

      var data = {
        serid: this.serid,
        adminid: this.auth.id,
      };

      var result = await this.$u.api.product.delservices(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1000,
          complete:()=>{
            uni.$u.route({
              type:"redirectTo",
                url:"/pagesC/product/gsservices/servicelist/list",
                params:{
                  typeid:this.typeid
                }
              })
          }
        });
    
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
    cancel() {
      this.show = false;
    },
    async confirm1() {
      this.show1 = false;

      var data = {
        carwashid: this.serid,
        adminid: this.auth.id,
      };

      var result = await this.$u.api.product.deleteservice(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1000,
          complete:()=>{
              uni.reLaunch({
                url:"/pagesC/product/gsservices/servicelist/list"
              })
          }
        });
       
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
    cancel1() {
      this.show1 = false;
    },



    selectcard(e) {
      this.servieslist = [];

      this.page = 1;

      // 直接赋值
      this.keyword = e;
      // 然后调用
      this.list();
    },
    async list() {
      // 最高管理员需传输的数据
      let data = {
        stoid: this.auth.stoid,
        page: this.page,
        keyword: this.keyword,
        adminid: this.auth.id,
        typeid: this.typeid,
      };
      var result = await this.$u.api.product.servieslist(data);

      if (result.code) {
        this.empty = "notempty";

        if (Array.isArray(result.data) && result.data.length > 0) {
          this.servieslist = this.servieslist.concat(result.data);

          this.page++;
        } else {
          this.status = "nomore";
        }
      }
    },

    async selectStatues(e) {
 
      this.servieslist = [];
      this.page = 1;
      this.keyword = ""
      this.typeid = e.typeid
      this.list();
    },

    addservice(e)
    {
      this.$u.route(`/pagesC/product/gsservices/servicelist/add`, {
        typeid: this.typeid,
      });
    },

    toEdit(serid) {
      this.$u.route(`/pagesC/product/gsservices/servicelist/edit`, {
        serid: serid,
        typeid:this.typeid
      });
    },
    scrolltolower() {
      this.list();
    },
    async topback() {
      this.list(this.typeid);
    },
  },
};
</script>

<style scoped  lang="scss" >
.section {
  margin: 60px 0px;
}

.backtop {
  width: 20px;
  color: "blue";
  margin-left: 15px;
}

.empty {
  margin-top: 50px;
}

.search {
  width: 70%;
  position: fixed;
  top: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 9%;
  z-index: 999;
}

.card {
  display: flex;
  width: 92%;
  height: 135px;
  margin: 0 auto;
  border-radius: 2%;
  border: 1px solid #eee;
  margin-top: 20px;
  box-shadow: 2px 2px 2px #eee, 2px 2px 2px #eee;

  .left {
    .img {
      padding: 22px;
    }
  }

  .right {
    width: 62%;
    margin-top: 23px;

    .text {
      h5 {
        // 超出一定长度变成三个点
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }

      span {
        font-size: 12px;
        color: #888;
      }

      span:nth-of-type(2) {
        padding-left: 10px;
      }
    }
  }
}

.content {
  background: #ffffff;
}
.flax {
  display: flex;
  align-items: center;
  .flax-span {
    font-size: 14px !important;
    color: #000 !important;
  }
}

</style>